import 'package:flutter/material.dart';
import '../../res/listData.dart';

class SelectDevicesType extends StatefulWidget {
  SelectDevicesType({Key key}) : super(key: key);

  @override
  _SelectDevicesTypeState createState() => _SelectDevicesTypeState();
}

class _SelectDevicesTypeState extends State<SelectDevicesType> {
  Widget _createPage() {
    var size = MediaQuery.of(context).size;

    /*24 is for notification bar on Android*/
    final double itemHeight = (size.height - kToolbarHeight - 330) / 2;
    final double itemWidth = size.width / 2;
    return Container(
        padding: EdgeInsets.fromLTRB(10, 60, 10, 0),
        decoration: BoxDecoration(
          image: new DecorationImage(
            fit: BoxFit.fitWidth,
            alignment: Alignment.topLeft,
            image: AssetImage('images/bg-ellipse.png'),
          ),
        ),
        child: Container(
            padding: EdgeInsets.fromLTRB(2, 0, 2, 0),
            decoration: BoxDecoration(
              color: Colors.grey[200],
            ),
            child: GridView.count(
                shrinkWrap: true,
                controller: ScrollController(keepScrollOffset: false),
                physics: ScrollPhysics(),
                // childAspectRatio: 2 / 2.5,
                childAspectRatio: (itemWidth / itemHeight),
                crossAxisSpacing: 6.0, //水平子 Widget 之间间距
                mainAxisSpacing: 6.0, //垂直子 Widget 之间间距
                padding: EdgeInsets.all(10),
                crossAxisCount: 2, //一行的 Widget 数量
                children: this._getListData())));
  }

  List<Widget> _getListData() {
    var tempList = listData.map((item) {
      return Container(
        alignment: Alignment.center,
        height: 400.0,
        padding: EdgeInsets.all(10),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Expanded(
              flex: 1,
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      alignment: Alignment.center,
                      child: Image.asset(item['imageUrl'], width: 70),
                    ),
                    InkWell(
                      onTap: () =>
                          {Navigator.pushNamed(context, '/InputDeviceNo')},
                      child: Container(
                          child:
                              Text("添加", style: TextStyle(color: Colors.blue)),
                          padding: EdgeInsets.fromLTRB(5, 2, 5, 2),
                          decoration: BoxDecoration(
                              border:
                                  Border.all(color: Colors.blue, width: 1))),
                    )
                  ]),
            ),
            Text(
              item['title'],
              textAlign: TextAlign.center,
              style: TextStyle(color: Colors.grey),
            ),
          ],
        ),
        decoration: BoxDecoration(
            color: Colors.white,
            //  boxShadow: [ BoxShadow(
            //   color: Colors.grey[200],
            //   offset: Offset(0.0, 1.0), //阴影y轴偏移量
            //    blurRadius: 2,
            //   )],
            border: Border.all(
                color: Color.fromRGBO(233, 233, 233, 0.9), width: 1)),
      );
    });
    return tempList.toList();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.grey[200],
        appBar: AppBar(
          title: Text("选择设备类型"),
          centerTitle: true,
          // backgroundColor:Color(0xFF000000)
        ),
        body: SingleChildScrollView(child: this._createPage()));
  }
}
